<template>
	<view class="content">
		<view class="content_list" v-for="(v1,k1) in dataList" :key="k1">
			<view class="content_list_title">
				{{v1.CatName}}
			</view>
			<view class="content_list_tab">
				<view :class="['item',v2.checked=='1'?'is':''] " v-for="(v2,k2) in v1.SubCatalog" :key="k2" @click="setData(k1,k2,v2.CatID)">{{v2.CatName}}</view>
			</view>
		</view>
		<view class="content_bottom">
			<view class="content_bottom_box">
				<view class="button" @click="tijiao">
					完成
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,nextTick
	} from 'vue'
	import {
		homeApi
	} from "@/api/index"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		link
	} from '@/utils/utils.js'
	onLoad(()=>{
		getData()
	})
	
	const dataList = ref([])
	const isList = ref([])
	const getData = async()=>{
		let data = {
			do:'txlmycatalogids'
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlmycatalogids') {
				dataList.value = res.columns[i].Catalog ? res.columns[i].Catalog : []
			}
		}
		for(let i=0;i<dataList.value.length;i++){
			for(let j=0;j<dataList.value[i].SubCatalog.length;j++){
				if(dataList.value[i].SubCatalog[j].checked=='1'){
					isList.value.push(dataList.value[i].SubCatalog[j].CatID)
				}
			}
		}
	}
	const setData = (k1,k2,id)=>{
		let index = isList.value.indexOf(id)
		if(index>=0){
			isList.value.splice(index,1)
			dataList.value[k1].SubCatalog[k2].checked=0
		}else{
			isList.value.push(id)
			dataList.value[k1].SubCatalog[k2].checked=1
		}
	}
	const tijiao = async()=>{
		if(isList.value.length>3){
			uni.showToast({
				title: '最多只能选择3个分类。',
				icon: 'none',
				duration: 2000
			});
			return
		}
		let data = {
			txlCatalogIDs:isList.value.join(',')
		}
		let res = await homeApi.publicPost(data,'txlmycatalogsave')
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlmycatalogsave') {
				if (res.columns[i].statuscode == '200') {
					uni.showToast({
						title: '操作成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				} else {
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		&_list{
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;
			&_title{
				padding-top: 30rpx;
				padding-bottom: 10rpx;
				font-size: 32rpx;
				color: #999;
			}
			&_tab{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.item{
					width: calc(33.33% - 20rpx - 2px);
					font-size: 28rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
					border: 1px solid #ddd;
					border-radius: 4px;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}
				.item.is{
					background: #56a9fc;
					color: #fff;
				}
			}
		}
		&_bottom{
			width: 100%;
			height: 120rpx;
			&_box{
				width: 100%;
				height: 120rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.button{
					width: calc(100% - 60rpx);
					height: 80rpx;
					background: #e94f06;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 32rpx;
				}
			}
		}
	}
</style>